<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>众筹管理后台</title>
		<script type="text/javascript" src="js/jquery1.12.4.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/countUp.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/dashboard.css" />
	</head>
	<body>
		
		 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">众筹管理平台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        	
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">首页</a></li>
         <li><a href="admin_userinfo.jsp">欢迎, 张三</a></li>
            <li><a href="update_userinfo.jsp" title="修改个人资料和密码的页面">设置</a></li>
            <li><a href="#" title="退出登录">退出</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
        	<ul class="nav nav-sidebar">
            <li ><a href="index.jsp">首页</a></li>
           </ul>
          <ul class="nav nav-sidebar">
            <li class="active"><a href="products.jsp">所有项目</a></li>
            <li><a href="auditing.jsp">项目审核</a></li>
            <li><a href="following.jsp">项目跟踪</a></li>
 		    <li><a href="comments.jsp">项目评论</a></li>
            <li><a href="classify.jsp">项目分类</a></li>
            <li><a href="recommend.jsp">项目推荐</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="user_register.jsp">注册用户</a></li>
            <li><a href="user_bankroll.jsp">用户资金</a></li>
            <li><a href="user_log.jsp">用户日志</a></li>
            <li><a href="user_audit.jsp">实名审核</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="news_management.jsp">新闻管理</a></li>
            <li><a href="problem_management.jsp">问题管理</a></li>
            <li><a href="user_management.jsp">管理用户</a></li>
            <li><a href="log_management.jsp">管理日志</a></li>
          </ul>
        </div>
        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">所有众筹项目</h1>

		<div class="panel panel-default">
  <div class="panel-body">
			<form class="form-inline"  id="myform" name="myform" method="post">
			  <div class="form-group">
			    <input type="text" class="form-control" id="exampleInputName1" name="psName" placeholder="项目名称"/>
			  </div>
			   <div class="form-group">
			    <input type="text" class="form-control" id="exampleInputName2"  name="user.usName" placeholder="项目发起人"/>
			  </div>
			  <div class="form-group">
			   <select class=form-control id="exampleInputName3" name="psType">
			   	<option value="">项目状态</option>
			   	<option value="0">待审核</option>
			   	<option value="1">待上架</option>
			   	<option value="2">众筹中</option>
			   	<option value="3">众筹失败</option>
			   	<option value="4">众筹成功</option>
			   	<option value="5">审核未通过</option>
			   </select>
			  </div>
			   <div class="form-group">
			   <select class=form-control id="exampleInputName4" name="psPstId">
			  		 	<option value="">项目类型</option>
			   </select>
			  </div>
			  &nbsp;&nbsp;
			  <input type="button" class="btn btn-default btn-primary" name="submit" id="search" value="查询" />  
			 <!--   <button type="submit" class="btn btn-default btn-primary" >查询</button>  -->
			</form>
    </div>
   </div>
			<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
    	所有项目列表
    </div>
  </div>
  <div class="panel-body">
   
          <div class="table-responsive ">
            <table class="table table-striped table-bordered" id=projects_table>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>项目类型</th>
                  <th>项目名称</th>
                  <th>项目进度</th>
                  <th>开始日期</th>
                  <th>结束日期</th>
                  <th>已筹金额</th>
                  <th>发起人</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
           
              </tbody>
            </table>
          </div>

  	<!-- 显示分页数据 -->
	<div class="row">
	<!-- 分页文字信息 -->
		<div class="col-md-6" id="page_info_area">
		
		</div>
	<!-- 分页条信息 -->
		<div class="col-md-6" id="page_nav_area">
		
		</div>
	</div>	
  </div>
</div>
      
        </div>
      </div>
    </div>
		
		
		
<script  type="text/javascript"> 
/*  	$(document).ready(function() {
		
		}); */
		
		  $("#search").click(function() {  
	           
			  $.ajax( {  
	                type : "GET",  
	                url : "/crowd_funding/getProjectsByCondition",  
	                data :$("#myform").serialize(), 
	                success : function(result) {  
	                 //alert("success: " + result);
	                 build_projects_table(result);
	   		   		 //2.解析并显示文字信息
	   		   		 build_page_info(result);
	   		    	 //3.解析并显示分页数据
	   		     	 build_page_nav(result,2);	
	                }  
	            });  
          });   
	
		 //页面跳转
	     function to_page1(pn){
	  	   $.ajax({
	   		  url:"/crowd_funding/getProjectsByCondition",
	   		  data:$("#myform").serialize()+"&pn="+pn,
	   		  type:"GET",
	   		  success:function(result){
	   			//1. 解析并显示员工数据
	   			 build_projects_table(result);
		   		 //2.解析并显示文字信息
		   		 build_page_info(result);
		    	 //3.解析并显示分页数据
		     	 build_page_nav(result,2);	
	   		  }
	   	  });
	     }    
	
	//页面加载完毕后，发送ajax请求，拿到分页数据
	   $(function(){
	  	 $.ajax({
	  	  url:"/crowd_funding/getAllProjects",
	      data:"pn=1",
	      type:"GET",
	      success:function(result){
	    	 //1. 解析并显示员工数据
	    	 //console.log(result);
	    	 //alert(result.extend.pageInfo.list);
	    	 build_projects_table(result);
	   		 //2.解析并显示文字信息
	   		 build_page_info(result);
	    	 //3.解析并显示分页数据
	     	 build_page_nav(result,1);	
	    	 }
	    	 });
	     })
	
	     //查出所有的部门信息，并显示在下拉列表
	        $(function(){
	    	   $.ajax({
	    		   url:"/crowd_funding/gylx",
	    		   type:"GET",
	    		   success:function(result){
	    			  // alert(result.code);
	    			   //console.log(result);
	    			   //显示部门信息到下拉列表
	    			  //$("#dept_add_select")
	    			  //alert(result.extend.projectstype);
	    			  $.each(result.extend.projectstype,function(){
	    				  //alert(this.pstId);
	    				  var optionEle=$("<option></option>").append(this.pstName).attr("value",this.pstId);
	    				  optionEle.appendTo($("#exampleInputName4"));
	    			  }); 
	    		   }
	    	   });
	       })
	       		     
	     //页面跳转
	     function to_page(pn){
	  	   $.ajax({
	   		  url:"/crowd_funding/getAllProjects",
	   		  data:"pn="+pn,
	   		  type:"GET",
	   		  success:function(result){
	   			//1. 解析并显示员工数据
	   			 build_projects_table(result);
		   		 //2.解析并显示文字信息
		   		 build_page_info(result);
		    	 //3.解析并显示分页数据
		     	 build_page_nav(result,1);	
	   		  }
	   	  });
	     }  
	 
	     //显示员工信息表
	 	function build_projects_table(result){
	    	   //清空表格
	    	   $("#projects_table tbody").empty();
	    	   var projects=result.extend.pageInfo.list;
	    	   $.each(projects,function(index,item){
	    		   //alert(item.psStarttime);
	    		  // alert(item.psGetmoney);
	    		  // alert(item.user.usName);
	    		   var psIdTd=$("<td></td>").append(item.psId);
	    		   var pstNameTd=$("<td></td>").append(item.projectsType.pstName);
	    		   var psNameTd=$("<td></td>").append(item.psName);
	    		   var aaaTd=$("<td></td>").append((Math.round((item.psGetmoney/item.psMoney)*10000))/100.00+"%");
	    		   var psStarttimeTd=$("<td></td>").append(fmtDate(item.psStarttime));
	    		   var psEndtimeTd=$("<td></td>").append(fmtDate(item.psEndtime));
	    		   var psGetmoneyTd=$("<td></td>").append(item.psGetmoney);
	    		   var usNameTd=$("<td></td>").append(item.user.usName);
	    		   
	    		   var deail=$("<a></a>").append("详情").attr("href","product/product-info1.jsp?psId="+item.psId);
	    		    //editBtn.attr("edit_id",item.psId);
	    		  /*  var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm  del_btn ")
	 		       .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
	 		       .append("删除");
	    		     delBtn.attr("del_id",item.empId);  */
	    		 var btnTd=$("<td></td>").append(deail);
	    		   $("<tr></tr>").append(psIdTd)
	    		   .append(pstNameTd)
	    		   .append(psNameTd)
	    		   .append(aaaTd)
	    		   .append(psStarttimeTd)
	    		   .append(psEndtimeTd)
	    		   .append(psGetmoneyTd)
	    		   .append(usNameTd)
	    		   .append(btnTd)
	    		   .appendTo("#projects_table tbody");
	    	   });
	       }      
	        
	 	
	 //解析显示分页条
     function build_page_nav(result,f){
  	   $("#page_nav_area").empty();
  	   var ul=$("<ul></ul>").addClass("pagination");
  	   
  	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
  	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
  	   if(result.extend.pageInfo.hasPreviousPage==false){
  		   firstPageLi.addClass("disabled");
  		   prePageLi.addClass("disabled");
  	   }else{    		   
  	   prePageLi.click(function(){
  		   if(f==1){
  			 to_page(result.extend.pageInfo.pageNum-1); 
  		   }else{
  			 to_page1(result.extend.pageInfo.pageNum-1);
  		   }
  		  
  	   });
  	   firstPageLi.click(function(){
  		 if(f==1){
  			 to_page(1);
  		   }else{
  			 to_page1(1);
  		   }
  		  
  	   });
  	   }
  	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
  	   
  	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
  	   if(result.extend.pageInfo.hasNextPage==false){
  		   nextPageLi.addClass("disabled");
  		   lastPageLi.addClass("disabled");
  	   }else{    		   
  	   nextPageLi.click(function(){
  		  if(f==1){
   			 to_page(result.extend.pageInfo.pageNum+1); 
   		   }else{
   			 to_page1(result.extend.pageInfo.pageNum+1);
   		   }
  	   });
  	   lastPageLi.click(function(){
  		 if(f==1){
  			to_page(result.extend.pageInfo.pages);
   		   }else{
   			to_page1(result.extend.pageInfo.pages);
   		   }
  		   
  	   });
  	   }
  	   
  	   ul.append(firstPageLi).append(prePageLi);
  	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
  	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
  		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
  		   if(result.extend.pageInfo.pageNum==item){
  			   numLi.addClass("active");
  		   }
  		   numLi.click(function(){
  			 if(f==1){
  				 to_page(item);
  	    	}else{
  	    	     to_page1(item);
  	        }
  			  
  		   });
  		   	ul.append(numLi);
  	   });
  	   ul.append(nextPageLi).append(lastPageLi);
  	   //把ul添加到nav
  	   var navEle=$("<nav></nav>").append(ul);
  	   navEle.appendTo("#page_nav_area");
     }
	
    
	       
	        function build_page_info(result){
	     	   $("#page_info_area").empty();
	     	   $("#page_info_area")
	     	   .append("当前第"+result.extend.pageInfo.pageNum+"页,共"+result.extend.pageInfo.pages+"页,共"+result.extend.pageInfo.total+"条记录");
	        }
	        
	        function fmtDate(inputTime) {
	            var date = new Date(inputTime);
	            var y = date.getFullYear();
	            var m = date.getMonth() + 1;
	            m = m < 10 ? ('0' + m) : m;
	            var d = date.getDate();
	            d = d < 10 ? ('0' + d) : d;
	            var h = date.getHours();
	            h = h < 10 ? ('0' + h) : h;
	            var minute = date.getMinutes();
	            var second = date.getSeconds();
	            minute = minute < 10 ? ('0' + minute) : minute;
	            second = second < 10 ? ('0' + second) : second;
	            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
	        }
	       

	
</script>
	</body>
</html>
